<template>
    <div class="scene" ref="sceneDiv">
    </div>
</template>

<script setup>
// 导入操作
import { onMounted, ref, reactive } from 'vue';
// 导入场景
import scene from '@/three/Scene'
// 导入相机
import camera from '@/three/Camera'
// 导入坐标轴
//创建gui对象
import axesHelper from '@/three/axesHelper'
// 导入渲染器
import renderer from "@/three/renderer"
import '@/three/init'
// 导入animate
import animate from '@/three/animate'
// 导入创建物体函数
import createMesh from '@/three/createMesh'
import mqttMSG from '@/api/mqtt'

import axios from 'axios';
// 添加到场景的对象
scene.add(camera)
scene.add(axesHelper)
createMesh()

// 挂载
let sceneDiv = ref(null)
onMounted(() => {
    sceneDiv.value.appendChild(renderer.domElement)
    animate()
    // 'api/three'
    axios.get('/three').then(function(res){
        // console.log(res.data);
        // mqttMSG('9ZYD_1_S')
        mqttMSG(res.data)
    })
})
</script>

<style>
.scene {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
}
</style>